<template>
	<view class="status-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true" :border="true" height="48px">
			<view slot="left" class="navbar-left">
				<navigator url="/pages/Assetmanage/Assetmanage" class="back-button">
					<view class="nav-back-content">
						<u-icon color="#1e88e5" name="arrow-left" size="20"></u-icon>
						<view class="nav-title">资产状态管理</view>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 状态列表 -->
		<view class="status-list">
			<view class="list-item" v-for="(status, index) in statusList" :key="status.id">
				<view class="status-info">
					<view class="status-name-code">
						<view class="status-name">{{ status.statusName }}</view>
						<view class="status-code">{{ status.statusCode }}</view>
					</view>
					<view class="status-company">公司ID: {{ status.companyId }}</view>
					<view class="status-sort">排序: {{ status.sort }}</view>
				</view>
				<view class="status-actions">
					<view class="action-btn edit-btn" @click="handleEditClick(status)">
						<u-icon name="edit-pen-fill" color="#1677ff" size="18" />
					</view>
					<view class="action-btn delete-btn" @click="handleDeleteClick(status.id)">
						<u-icon name="trash-fill" color="#ff4d4f" size="18" />
					</view>
				</view>
			</view>

			<!-- 空状态提示 -->
			<view class="empty-state" v-if="statusList.length === 0">
				<u-empty mode="list"></u-empty>
				<view class="empty-text">暂无资产状态数据</view>
			</view>
		</view>

		<!-- 添加按钮 -->
		<view class="add-button" @click="handleAddClick">
			<u-icon name="plus" size="22" color="#fff" />
		</view>

		<!-- 新增/编辑状态弹窗 -->
		<u-popup :show="showStatusDialog" @close="handleDialogClose" mode="center" :round="16"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<view class="popup-title">{{ isEdit ? '编辑资产状态' : '新增资产状态' }}</view>

				<view class="add-form">
					<view class="form-item">
						<text class="form-label required">状态编码</text>
						<view class="form-control">
							<input type="text" v-model="newStatus.statusCode" placeholder="请输入状态编码"
								class="input-control" />
						</view>
					</view>

					<view class="form-item">
						<text class="form-label required">状态名称</text>
						<view class="form-control">
							<input type="text" v-model="newStatus.statusName" placeholder="请输入状态名称"
								class="input-control" />
						</view>
					</view>

					<view class="form-item">
						<text class="form-label required">排序</text>
						<view class="form-control">
							<input type="number" v-model="newStatus.sort" placeholder="请输入排序号" class="input-control"
								min="0" />
						</view>
					</view>
				</view>

				<view class="popup-buttons">
					<view class="cancel-btn" @click="showStatusDialog = false">取消</view>
					<view class="confirm-btn" @click="confirmStatusOperate">
						{{ isEdit ? '确定修改' : '确定新增' }}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 公司信息
				companyInfo: uni.getStorageSync('companyInfo') || {},

				// 状态列表数据
				statusList: [],

				// 弹窗控制
				showStatusDialog: false,
				isEdit: false,
				currentStatusId: null,

				// 新增/编辑状态表单数据（已移除备用字段）
				newStatus: {
					companyId: '',
					statusCode: '',
					statusName: '',
					sort: 0
				}
			};
		},
		computed: {
			// 获取公司ID
			companyId() {
				return this.companyInfo.id || '';
			}
		},
		onLoad() {
			// 页面加载时获取资产状态列表
			this.getStatusList();
		},
		methods: {
			// 获取资产状态列表
			getStatusList() {
				uni.$u.http.get('/VipAssetStatus/list', {
					params: {
						companyId: this.companyId,
						pageSize: 1000 // 获取所有状态
					}
				}).then(res => {
					if (res.code === 200 && res.data && res.data.data) {
						this.statusList = res.data.data;
					} else {
						uni.showToast({
							title: '获取资产状态列表失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取资产状态列表失败', err);
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				});
			},

			// 新增状态
			handleAddClick() {
				this.isEdit = false;
				this.currentStatusId = null;
				// 初始化表单（已移除备用字段）
				this.newStatus = {
					companyId: this.companyId,
					statusCode: '',
					statusName: '',
					sort: 0
				};
				this.showStatusDialog = true;
			},

			// 编辑状态
			handleEditClick(status) {
				this.isEdit = true;
				this.currentStatusId = status.id;
				// 加载状态数据到表单（已移除备用字段）
				this.newStatus = {
					id: status.id,
					companyId: status.companyId,
					statusCode: status.statusCode,
					statusName: status.statusName,
					sort: status.sort
				};
				this.showStatusDialog = true;
			},

			// 关闭弹窗
			handleDialogClose() {
				this.showStatusDialog = false;
			},

			// 确认新增/编辑状态
			confirmStatusOperate() {
				// 表单验证
				const {
					statusCode,
					statusName,
					sort
				} = this.newStatus;

				if (!statusCode.trim()) {
					return uni.showToast({
						title: '请输入状态编码',
						icon: 'none'
					});
				}

				if (!statusName.trim()) {
					return uni.showToast({
						title: '请输入状态名称',
						icon: 'none'
					});
				}

				if (sort === null || sort === '' || isNaN(sort) || sort < 0) {
					return uni.showToast({
						title: '请输入有效的排序号',
						icon: 'none'
					});
				}

				// 准备提交的数据（已移除备用字段）
				const submitData = {
					...this.newStatus,
					companyId: this.companyId
				};

				if (this.isEdit) {
					// 编辑状态
					uni.$u.http.put('/VipAssetStatus', submitData)
						.then(res => {
							if (res.code === 200) {
								uni.showToast({
									title: '修改成功',
									icon: 'success'
								});
								this.showStatusDialog = false;
								this.getStatusList(); // 重新获取列表
							} else {
								uni.showToast({
									title: '修改失败',
									icon: 'none'
								});
							}
						})
						.catch(err => {
							console.error('修改资产状态失败', err);
							uni.showToast({
								title: '网络错误',
								icon: 'none'
							});
						});
				} else {
					// 新增状态
					uni.$u.http.post('/VipAssetStatus', submitData)
						.then(res => {
							if (res.code === 200) {
								uni.showToast({
									title: '新增成功',
									icon: 'success'
								});
								this.showStatusDialog = false;
								this.getStatusList(); // 重新获取列表
							} else {
								uni.showToast({
									title: '新增失败',
									icon: 'none'
								});
							}
						})
						.catch(err => {
							console.error('新增资产状态失败', err);
							uni.showToast({
								title: '网络错误',
								icon: 'none'
							});
						});
				}
			},

			// 删除状态
			handleDeleteClick(id) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除该资产状态吗？删除后不可恢复',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.delete(`/VipAssetStatus/${id}`, {
								params: {
									companyId: this.companyId
								}
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});
									this.getStatusList(); // 重新获取列表
								} else {
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								console.error('删除资产状态失败', err);
								uni.showToast({
									title: '网络错误',
									icon: 'none'
								});
							});
						}
					}
				});
			}
		}
	};
</script>

<style scoped>
	.status-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	/* 导航栏样式 */
	.navbar-left,
	.back-button,
	.nav-back-content {
		display: flex;
		align-items: center;
	}

	.nav-title {
		color: #1e88e5;
		font-size: 16px;
		font-weight: 500;
		margin-left: 8px;
	}

	/* 列表样式 */
	.status-list {
		flex: 1;
		padding: 16px;
		padding-bottom: 100px;
	}

	.list-item {
		background-color: white;
		border-radius: 10px;
		padding: 16px;
		margin-bottom: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	}

	.status-info {
		flex: 1;
	}

	.status-name-code {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.status-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-right: 12px;
	}

	.status-code {
		font-size: 14px;
		color: #666;
		background-color: #f5f7fa;
		padding: 2px 8px;
		border-radius: 4px;
	}

	.status-company,
	.status-sort {
		font-size: 14px;
		color: #666;
		margin-top: 4px;
	}

	.status-actions {
		display: flex;
		gap: 16px;
	}

	.action-btn {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.edit-btn {
		background-color: #f0f9ff;
	}

	.delete-btn {
		background-color: #fff2f0;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 0;
		color: #999;
	}

	.empty-text {
		margin-top: 16px;
		font-size: 14px;
	}

	/* 添加按钮 */
	.add-button {
		position: fixed;
		bottom: 24px;
		right: 24px;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background-color: #1677ff;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 16px rgba(22, 119, 255, 0.3);
		transition: all 0.2s ease;
		z-index: 10;
	}

	.add-button:active {
		transform: scale(0.94);
	}

	/* 弹窗样式 */
	.popup-content {
		width: 680rpx;
		max-width: 400px;
		background-color: white;
		border-radius: 16px;
		overflow: hidden;
	}

	.popup-title {
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		padding: 18px 0;
		border-bottom: 1px solid #f0f2f5;
		color: #333;
	}

	.add-form {
		padding: 16px;
		max-height: 60vh;
		overflow-y: auto;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f5f7fa;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.form-label.required::before {
		content: '*';
		color: #ff4d4f;
		margin-right: 4px;
	}

	.form-label {
		width: 30%;
		font-size: 15px;
		color: #333;
	}

	.form-control {
		width: 70%;
	}

	.input-control {
		width: 100%;
		font-size: 15px;
		color: #333;
		padding: 8px 0;
		border: none;
		outline: none;
		border-bottom: 1px solid #f5f7fa;
	}

	.popup-buttons {
		display: flex;
		border-top: 1px solid #f0f2f5;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		text-align: center;
		padding: 30rpx;
		font-size: 16px;
		cursor: pointer;
	}

	.cancel-btn {
		color: #666;
		border-right: 1px solid #f0f2f5;
	}

	.confirm-btn {
		color: #ffffff;
		font-weight: 500;
		background-color: #1677ff;
	}

	/* 按钮交互效果 */
	.confirm-btn:active {
		background-color: #0958d9;
	}
</style>